<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{shared/layout.html}">

<head>
    <!--styles 样式-->
    <style type="text/css">

    </style>
</head>

<body>
<!--body-->
<th:block layout:fragment="body">
    <div class="m-20" id="app" v-cloak>
        <div class="container-fluid">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="10" :md="5" :lg="5" :xl="5">

                    <div class="card mb-0">
                        <div class="card-body" style="min-height:calc(100vh - 40px)">
                            <div class="card-title mb-0">
                                <span>菜单树</span>
                                <el-divider direction="vertical"></el-divider>
                                <a href="javascript:;" slot="extra"
                                   @click="search.vm.parentId=null;findList();getTree();">查看一级</a>
                                <el-divider></el-divider>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <el-tree show-checkbox node-key="key"
                                             @node-click="(row)=>{search.vm.parentId=row.key;findList()}"
                                             :data="tree.tree" :props="defaultProps"
                                             :default-expanded-keys="tree.defaultExpandedKeys"
                                             :default-checked-keys="tree.defaultCheckedKeys"
                                             :expand-on-click-node="false"></el-tree>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-col>
                <el-col :xs="24" :sm="14" :md="19" :lg="19" :xl="19">

                    <div class="card mb-20">
                        <div class="card-body">
                            <div class="row">

                                <div class="col-sm-3">
                                    <h4 class="example-title">菜单名称</h4>
                                    <input type="text" class="form-control" v-model="search.vm.name"
                                           placeholder="菜单名称">
                                </div>

                                <!--以下被隐藏-->
                                <!-- <div class="col-sm-3" v-show="search.state">
                            <h4 class="example-title">角色名称</h4>
                            <input type="text" class="form-control" v-model="search.vm.name" placeholder="角色名称">
                        </div> -->
                                <!--检索操作-->
                                <div class="col-sm-4 text-center pt-35">
                                    <button type="button" class="btn btn-primary"
                                            @click="searchEvent">检索
                                    </button>&nbsp;
                                    <button type="button" class="btn btn-secondary" @click="reset">重置</button>&nbsp;
                                    <button type="button" class="btn btn-link" @click="search.state=!search.state"
                                            v-if="search_field_len">
                                        {{search.state?'收起':'展开'}}&nbsp;
                                        <i class="fas fa-chevron-up" v-if="search.state"></i>
                                        <i class="fas fa-chevron-down" v-else></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="card m-0">
                        <div class="card-body pl-0 pr-0">
                            <div class="row ml-10 mr-10 mb-20">
                                <div class="col-sm-12">
                                    <button class="btn btn-primary" @click="openForm()"
                                            v-if="power.insert">新建
                                    </button>
                                    <button class="btn btn-danger" @click="remove()" v-if="power.delete">删除</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <el-table :data="table.data"
                                              @selection-change="(array)=>{table.selecteds=array;}"
                                              @row-dblclick="row_dblclick" row-key="_ukid" size="medium"
                                              :header-cell-style="{background:'#fafafa'}">
                                        <el-table-column type="index" width="50" fixed></el-table-column>
                                        <el-table-column type="selection" width="50" fixed></el-table-column>

                                        <el-table-column prop="num" label="编号"></el-table-column>
                                        <el-table-column prop="name" label="角色名称"></el-table-column>
                                        <el-table-column prop="url" label="地址" width="250"></el-table-column>
                                        <el-table-column prop="pname" label=" 父级菜单"></el-table-column>
                                        <el-table-column prop="icon" label="icon"></el-table-column>
                                        <el-table-column prop="isShow" label="是否显示" width="100"></el-table-column>

                                        <el-table-column fixed="right" label="操作" width="120"
                                                         v-if="power.update || power.delete">
                                            <template slot-scope="scope">
                                                <el-link type="primary" @click="openForm(scope.row._ukid)"
                                                         v-if="power.update">编辑
                                                </el-link>
                                                <el-divider direction="vertical"></el-divider>
                                                <el-link type="danger" @click="remove(scope.row._ukid)"
                                                         v-if="power.delete">
                                                    删除
                                                </el-link>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination @size-change="(val)=>{table.rows=val;findList();}"
                                                   @current-change="(val)=>{table.page=val;findList();}"
                                                   :current-page="table.page"
                                                   :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]"
                                                   :page-size="table.rows" layout="total,
                                                sizes, prev, pager, next, jumper" :total="table.totalCount"
                                                   class="mt-10 ml-10">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-col>
            </el-row>

        </div>

    </div>
    <!--js 脚本-->
    <input type="hidden" th:value="${power}" id="power">
    <input type="hidden" th:value="${findback}" id="findback"/>
    <script type="text/javascript">
        let power = JSON.parse(document.getElementById("power").value);
        let findback = parseInt(document.getElementById("findback").value);
        let app = new Vue({
            el: "#app",
            data: function () {
                return {
                    prefix: '/admin/system/menu',
                    power,
                    search: {
                        state: false,
                        vm: {
                            parentId: null,
                            name: null
                        }
                    },
                    table: {
                        columns: [],
                        data: [],
                        page: 1,
                        size: 10,
                        total: 0,
                        selecteds: [] //选中的行
                    },
                    tree: {},
                    defaultProps: {
                        children: 'children',
                        label: 'title'
                    }
                }
            },
            //计算属性
            computed: {
                search_field_len: function () {
                    return Object.keys(this.search.vm).length > 3;
                }
            },
            created: function () {
                this.getMenusFunctionTree();
                this.findList();
            },
            mounted: function () {

            },
            methods: {
                //获取列表
                findList: function () {
                    let _this = this;
                    let path = _this.prefix + '/list/' + _this.table.size + '/' + _this.table
                        .page;

                    hzyAdmin.post(path, _this.search.vm, function (r) {
                        if (r.code !== 1) return;
                        _this.table.data = r.data.dataSource;
                        _this.table.total = r.data.total;
                        _this.table.columns = r.data.cols;
                    });
                },
                //检索
                searchEvent: function () {
                    this.table.page = 1;
                    this.findList();
                },
                //重置
                reset: function () {
                    this.table.page = 1;
                    for (let item in this.search.vm) this.search.vm[item] = null;
                    this.findList();
                },
                //删除
                remove: function (id) {
                    let _this = this;
                    let ids = [];
                    if (id) {
                        ids.push(id);
                    } else {
                        let selecteds = this.table.selecteds;
                        if (selecteds.length == 0) return hzyAdmin.alert("请勾选要删除得数据!", "错误");
                        for (let i = 0; i < selecteds.length; i++) {
                            ids.push(selecteds[i]._ukid);
                        }
                    }
                    if (confirm("确定要删除吗?")) {
                        //请求接口删除
                        let path = _this.prefix + '/delete';

                        hzyAdmin.post(path, ids, function (r) {
                            if (r.code !== 1) return;
                            hzyAdmin.alert("删除成功!", "成功");
                            _this.findList();
                            _this.getMenusFunctionTree();
                        });
                    }
                },
                //打开表单
                openForm: function (id) {
                    let _this = this;
                    let path = _this.prefix + '/info' + (id ? '/' + id : '');
                    path += "?parentId=" + (_this.search.vm.parentId == null ? '' : _this.search.vm
                        .parentId);

                    hzyAdmin.openPage(id ? '编辑' : '新建', path, function () {
                        _this.findList(); //刷新列表
                        _this.getMenusFunctionTree();
                    }, 800);
                },
                //双击表格行
                row_dblclick: function (row, column, event) {
                    if (findback === 1) {
                        window.localStorage.setItem('findback', JSON.stringify(row));
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }
                },
                //获取菜单树
                getMenusFunctionTree: function () {
                    let _this = this;
                    let path = _this.prefix + "/getMenusFunctionTree";

                    hzyAdmin.post(path, {}, function (r) {
                        if (r.code != 1) return;
                        console.log(r);
                        _this.tree = r.data;
                    });
                }
            }
        });
    </script>
</th:block>
</body>

</html>